<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" label-width="80px" class="bottomForm">
        <el-row>
          <el-col :span="24">
            <el-form-item label="应收金额" prop="billMoney" style="font-weight: 100;">
              <el-input v-model="form.receivableMoney" readonly=""/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="缴费方式" prop="modePayments" style="font-weight: 100;">
              <el-checkbox-group v-model="modePayments" @change="changeModePayments">
                <el-checkbox
                  v-for="dict in collectionOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue">
                  {{dict.dictLabel}}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-for="(item,index) in form.modePayments">
            <el-form-item :label="item.formLabel" :key="index">
              <el-input v-model="item.billMoney"  @blur="billMoneyBlur(item)"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="转存金额" prop="transferAmount" style="font-weight: 100;">
          <el-input v-model="form.transferAmount" readonly=""/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <span style="margin-right: 30px;">
          <span style="font-size: 18px;color: red;">本次收到金额</span>
          <span style="font-size: 20px;color: red;font-weight: 600;"><svg-icon icon-class="money1" />{{form.billMoney}}</span>
        </span>
        <el-button type="danger" style="font-size: 25px;" plain @click="submitForm">缴 费</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {
    name: "payment",
    data() {
      return {
        open: false,
        title: '收款方式',
        //收款方式
        collectionOptions: [],
        modePayments: ['XJ'],
        form: {}
      };
    },
    created() {
      this.getDicts("collection_method").then(response => {
        this.collectionOptions = response.data;
      });
    },
    methods: {
      show(options) {
        this.open = true
        this.reset()
        this.form.isPrint = options.isPrint
        this.form.receivableMoney = parseFloat(options.billMoney)
        this.form.billMoney = parseFloat(options.billMoney)
        this.form.modePayments[0].billMoney = parseFloat(options.billMoney)
      },
      changeModePayments(v) {
        let modePayments = []
        if (v.length > 0) {
          for (let i in v) {
            let index_0 = this.form.modePayments.findIndex(x => x.collectionMethod == v[i])
            if (index_0 != -1) {
              modePayments.push(this.form.modePayments[index_0])
            } else {
              let index_1 = this.collectionOptions.findIndex(x => x.dictValue == v[i])
              if (index_1 != -1) {
                modePayments.push(
                  {
                    formLabel: this.collectionOptions[index_1].dictLabel,
                    collectionMethod: this.collectionOptions[index_1].dictValue,//收款方式
                    billMoney: 0 //收款金额
                  }
                )
              }
            }
          }
        }
        this.form.modePayments = modePayments
        this.billMoneyBlur()
      },
      //收款金额焦点
      billMoneyBlur(item) {
        if(item && item.billMoney < 0){
          this.msgWarning("不允许输入负数")
          item.billMoney = 0
          return
        }
        let billMoney = 0;
        for (let i in this.form.modePayments) {
          billMoney += parseFloat(this.form.modePayments[i].billMoney)
        }
        //收到金额 是否大于应收金额
        if(billMoney > this.form.receivableMoney ){
          this.form.transferAmount = this.$utils.round(billMoney - parseFloat(this.form.receivableMoney), 2)
        }else{
          this.form.transferAmount = 0
        }
        this.form.billMoney = billMoney
      },
      reset() {
        this.form = {
          receivableMoney: 0, //应收金额
          billMoney: 0, //实收金额
          transferAmount: 0, //转存金额
          modePayments: [
            {
              formLabel: '现金',
              collectionMethod: 'XJ',//收款方式
              billMoney: 0//收款金额
            }
          ]
        };
        this.resetForm("form");
        this.modePayments = ['XJ']
      },
      cancel() {
        this.open = false
      },
      submitForm() {
        if(this.form.billMoney < this.form.receivableMoney){
          this.$confirm('<span style="color: red;">本次收到金额小于应收金额,是否确认收款?</span>', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            dangerouslyUseHTMLString: true,
            type: "warning"
          }).then(() => {
            this.submitOk()
          }).catch(() => {});
        }else{
          this.$confirm(`本次收到金额<span style="color: red;font-size: 20px;">[${this.form.billMoney}]</span>是否确认收款?`, "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            dangerouslyUseHTMLString: true,
            type: "warning"
          }).then(() => {
            this.submitOk()
          }).catch(() => {});
        }
      },
      submitOk(){
        this.cancel();
        this.$emit("ok", this.form)
      }
    }
  };
</script>
<style lang="scss" scoped>
  .submit-but {
    text-align: center;

    .link-but {
      margin-left: 10px;
    }
  }

  .operate-but {
    text-align: center;
  }

  ::v-deep .bottomForm {
    margin-top: 10px;

    .el-input__inner {
      border: none;
      border-bottom: 1px solid #DCDFE6;
      border-radius: 0;
      padding: 0 5px;
    }

    .el-form-item--mini .el-form-item__label {
      padding: 3px !important;
    }

    .el-input-group__append, .el-input-group__prepend {
      border: none;
      background: none;
      font-weight: bold;
      font-size: 14px;
    }
  }

  ::v-deep .el-table__row {
    .el-input__inner {
      border: none;
      border-bottom: 1px solid #DCDFE6;
      border-radius: 0;
      padding: 0 5px;
    }
  }

  ::v-deep .topForm {
    .el-input__inner {
      border: none;
      border-bottom: 1px solid #DCDFE6;
      border-radius: 0;
      padding: 0 5px;
    }
  }
</style>
